{% extends './base.html' %}
{%block head%}
<title>{{ lesson.name }}</title>
{% endblock %}
{% block content %}
<div class="container-lg">
    <div class="m-3 justify-content-center">
        <div class="card border-success mb-3 border-3 shadow">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                    <h1 class="display-1">{{ lesson.name }}</h1>
                    <span class="badge bg-primary rounded-pill">荐</span>
                </div>
                <ul class="list-group">
                    <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                            <div class="fw-bold">学分</div>
                            {{ lesson.credit }}
                        </div>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                            <div class="fw-bold">考核方式</div>
                            {{ lesson.appraisal_method }}
                        </div>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                            <div class="fw-bold">课程性质</div>
                            {{ lesson.course_type }}
                        </div>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                            <div class="fw-bold">任课教师</div>
                            {{ lesson.teacher }}
                        </div>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                            <div class="fw-bold">起止周</div>
                            {{ lesson.period_start }} ~ {{ lesson.period_end }}
                        </div>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                            <div class="fw-bold">开课学院</div>
                            {{ lesson.course_offering_institute }}
                        </div>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                            <div class="fw-bold">是否开课</div>
                            {{ lesson.offer_class_status }}
                        </div>
                    </li>
                </ul>
            </div>
            <div class="card-footer">
                <small class="text-muted">最后更新于：{{ lesson.date }}</small>
            </div>
        </div>
    </div>

    <div class="d-grid gap-2 m-3 mt-4 shadow-sm">
        <a class="btn btn-primary" type="button" href="{% url 'lesson:writecomment' lesson.id %}">🖊写评论</a>
    </div>

    <div class="row row-cols-1 row-cols-md-3 row-cols-lg-4 g-4 m-3">
        {% for comment in lesson.comment_set.all %}
        <div class="col">
            <div class="card h-100 shadow-sm">
                <div class="card-body">
                    <h5 class="card-title">{{ comment.title }}</h5>
                    <h6 class="card-subtitle mb-2 text-muted">{{ comment.user.name }} 学期:{{ comment.term }}
                        得分:{{ comment.score }}</h6>
                    <div class="card-text">{{ comment.html|safe }}</div>
                </div>
                <div class="list-group border-0" style="border-radius: 0; ">
                    <form class="like-comment" action="." method="POST">
                        {% csrf_token %}
                        <input type="hidden" name="type" value="comment">
                        <input type="hidden" name="id" value="{{ comment.id }}">
                        <input class="like-button list-group-item list-group-item-action" type="submit" style="border-left-width: 0; border-right-width: 0;text-align:
                    center;" value="{{ comment.likes }} ❤">
                    </form>
                </div>
                <div class="card-footer">
                    <small class="text-muted">最后更新于：{{ comment.date }}</small>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>


<script async>
    const likelesson = document.querySelector('.like-lesson');
    const likecomments = document.querySelectorAll('.like-comment');
    const commentlikes = document.querySelectorAll('.comment-likes');
    let i = 0;
    let checked = "已点赞✔";


    //发送点赞请求
    function sendlike(target) {
        let XHR = new XMLHttpRequest();
        let FD = new FormData(target);
        XHR.addEventListener("load", function (event) {
            obj = JSON.parse(event.target.responseText);
            target.previousElementSibling.textContent = obj['likes'];
        });
        XHR.addEventListener("error", function (event) {
            alert("哎呀，数据传输失败了！请检查网络连接，并尝试重载本页面。");
        });
        XHR.open("POST", "/like/");
        XHR.send(FD);
    }

    //给评论点赞
    for (i = 0; i < likecomments.length; i++) {
        if (localStorage.getItem('btn' + likecomments[i].children[2].value)) {
            likecomments[i].children[3].setAttribute('disabled', true);
            likecomments[i].children[3].value = checked;
            continue;
        }
        likecomments[i].addEventListener('submit', function (event) {
            event.preventDefault();
            sendlike(event.target);
            event.target.children[3].value = checked;
            event.target.children[3].setAttribute('disabled', true);
            localStorage.setItem('btn' + event.target.children[2].value, true);
        });
    }
</script>
{% endblock %}